<template>
	<a-typography-text strong v-if="!isEnterPriseContract">
		<blockquote style="margin-top: 0">交割单状态</blockquote>
	</a-typography-text>
	<a-descriptions :column="5" v-if="!isEnterPriseContract">
		<a-descriptions-item label="物业交割单状态">
			<div v-if="isConfirmDelivery">已确定</div>
			<div v-else>
				<a-space>
					<span>未确定</span>
					<a @click="visibles.delivery = true">确定交割单</a>
				</a-space>
			</div>
		</a-descriptions-item>
	</a-descriptions>
	<a-typography-text strong>
		<blockquote style="margin-top: 0">房屋配置</blockquote>
	</a-typography-text>
	<vxe-grid
		:columns="columns"
		:data="detail.articles"
		border
		show-overflow
		size="small"
		:max-height="300"
		:row-config="{isHover: true}" />
	<a-typography-text strong>
		<blockquote>备注</blockquote>
	</a-typography-text>
	<div v-if="detail.comment">{{ detail.comment }}</div>
	<div v-else v-color="{color: 'gray'}">无</div>
	<a-typography-text strong>
		<blockquote>水电燃气底数</blockquote>
	</a-typography-text>
	<a-descriptions :column="5">
		<a-descriptions-item v-for="meter in detail.meters" :key="meter.deviceType">
			<template #label>
				{{ METER_DEVICE_MAP[meter.deviceType] }}
			</template>
			<template v-if="meter.read !== null">{{ meter.read }} {{ meter.suffix }}</template>
			<template v-else>无</template>
		</a-descriptions-item>
	</a-descriptions>
	<a-typography-text strong>
		<blockquote>附件</blockquote>
	</a-typography-text>
	<file-preview v-if="detail.attachmentDtos && detail.attachmentDtos.length" :files="detail.attachmentDtos" />
	<div v-color="{color: 'gray'}" v-else>未上传附件</div>
	<!-- 物业交割单 -->
	<delivery-note
		:sign-type="signType"
		v-model:visible="visibles.delivery"
		:id="houseId"
		:is-supplement="isSupplement"
		:contractId="contractId"
		@success="getHouseDelivery" />
</template>
<script setup lang="ts">
	import {onMounted, ref, reactive} from 'vue'
	import {getHouseDeliveryGetNoe} from '@/api/contract'
	import {METER_DEVICE_MAP} from '@/constant/device'
	import {defaultMeters} from '@/interface/contract'
	import FilePreview from '@/components/common/file-preview.vue'
	import XEUtils from 'xe-utils'
	import DeliveryNote from '@/components/contract/add-tenant-contract-dialog/delivery-note.vue'

	const props = defineProps<{
		contractId: string
		houseId: string
		signType: number
		/** 是否是企业子合同 企业子合同不展示物业交割单状态 */
		isEnterPriseContract: boolean
	}>()

	const columns = [
		{title: '种类', field: 'typeName'},
		{title: '物品名称', field: 'configName'},
		{title: '价格(元)', field: 'price'},
		{title: '数量', field: 'count'}
	]

	const detail = ref<any>({})
	// 是否已经确定物业交割单
	const isConfirmDelivery = ref(false)
	// 是否是补充物业交割单
	const isSupplement = ref(true)
	const visibles = reactive({
		delivery: false
	})
	// 判断是否填写物业交割单 或者交割单中是否有内容
	const hasDelivery = (data: any): boolean => {
		if (!data) {
			return false
		}
		// 遍历这几个字段 其中一个有 都视为已填写物业交割单
		// const keyList = ['articles', 'attachmentDtos', 'attachments', 'comment', 'meters']
		// for (let i = 0; i < keyList.length; i++) {
		// 	if (data[keyList[i]] && data[keyList[i]].length) {
		// 		const meterList = data[keyList[i]]
		// 		switch (keyList[i]) {
		// 			case 'attachments':
		// 				try {
		// 					if (JSON.parse(data[keyList[i]]).length) {
		// 						return true
		// 					}
		// 				} catch (error) {
		// 					console.log(error)
		// 				}
		// 				break
		// 			/**
		// 			 * meter字段很多情况 有时候为null 或者是空数组 或者是有一个length但是没有任何读数信息
		// 			 * 这里判断meter有数组长度的情况下其中一个有读数信息则视为已经填写物业交割单
		// 			 */
		// 			case 'meters':
		// 				for (const j in meterList) {
		// 					if (meterList[j].read) return true
		// 				}
		// 				break
		// 			default:
		// 				return true
		// 		}
		// 	}
		// }
		// return false
		// 空的物业交割单默认视为已填！
		return true
	}

	const getHouseDelivery = () => {
		const params = {
			id: props.contractId,
			type: 1
		}
		getHouseDeliveryGetNoe(params).then(({data}) => {
			isConfirmDelivery.value = hasDelivery(data)
			detail.value = data || {}
			detail.value.meters = XEUtils.merge(defaultMeters(), detail.value.meters)
		})
	}

	onMounted(() => {
		getHouseDelivery()
	})
</script>
<style lang="less" scoped>
	.d-module-title {
		margin: 15px 0 5px;
	}
</style>
